<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="../statics/css/base.css">
    <link rel="stylesheet" href="/statics/css/css.css">
</head>

<body style="background-image: url('/statics/img/fish.png');">

        <div class="container">
            <div class="col">
                <div class="alert alert-warning text-center invisible" role="alert" style="width: 42rem;margin-left: 12.5rem;">
                    <strong>提示：</strong> <font id="msgId">出错啦😔</font>
                </div>
            </div>

        <div class="row align-items-center" style="height: 550px;">
            <div class="col">
                <img src="/statics/img/0.gif" alt="">
            </div>

            <!-- 中间的卡片 -->
            <div class="col">
                <div>
                    <!-- 卡片设置 -->
                    <div class="card" style="width: 36rem; margin-top: 5rem;">
                        <div class="card-body">
                            <!-- 登录 -->
                            <h5 class="card-title" style="text-align: center;">
                                <div class="alert-primary" role="alert"
                                    style="width: 300px; margin-left: 7.5rem;">
                                    ***~~~~登录~~~~***
                                </div>
                                <img src="../img/fish.png" alt="">
                            </h5>
                            <!-- 账号密码 -->
                            <form id="loginForm" method="POST" action="/login">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">账号：</label>
                                    <input type="email" class="form-control" id="username" name="username"
                                        aria-describedby="emailHelp">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">密码：</label>
                                    <input type="password" class="form-control" id="password" name="password">
                                </div>
                                <div class="form-group form-check">
                                    <input type="checkbox" class="form-check-input" id="exampleCheck1"
                                        style="margin-left: 27rem;">
                                    <label class="form-check-label" for="exampleCheck1"
                                        style="margin-left: 28rem;">记住我</label>
                                </div>
                                <div style="margin-left: 18rem;">
                                    <button type="button" class="btn btn-outline-warning" style="width: 120px;"
                                        onclick="jump()">登录</button>
                                    <button type="button" class="btn btn-outline-success" onclick="register()"
                                        style="width: 120px;">注册</button>
                                </div>

                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col">
                
            </div>
            
        </div>

    <div id="footer">
        Fish © 2021
        <!-- 域名备案 -->
        <a href="http://beian.miit.gov.cn/" target="_blank">闽ICP备2020021665号</a>
        </a>
    </div>

    <script src="../statics/js/jquery-3.6.0.min.js"></script>
    <script src="../statics/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
    <script>
        function register(){
            window.location.href='/register';
        }
        function jump() {
            var uid = $('#username').val();
            var pwd = $('#password').val();

            if (uid.length > 0 && pwd.length > 0) {
                axios({
                    method: 'post',
                    url: '/loginDone',
                    data: $('#loginForm').serialize(),
                }).then(function (res) {
                    res = res.data;
                    if (res.code === 200) {
                        window.location.href = '/';
                    } else {
                        alert_fn(res.msg);
                        console.log(res.msg);
                    }
                }).catch((err) => {
                    alert_fn(err);
                    console.log(err);
                });
            } else {
                alert_fn('出错啦😔！记得写密码和账号哦');
            }
        }

        function alert_fn(msg){
            $('#msgId').text(msg);
            $('.alert').removeClass('invisible');
            setTimeout(() => {
                $('.alert').addClass('invisible');
            }, 5000);
        }
    </script>
</body>


</html>